<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>预警设置 - 转炉终点预测系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="styles/unified.css">
    <link rel="stylesheet" href="styles/components.css">
    <link rel="stylesheet" href="styles/sidebar-theme.css">
    <link rel="stylesheet" href="styles/scale-fix.css">
    <link rel="stylesheet" href="styles/modal-dialog.css">
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-header">
            <div class="sidebar-logo">
                <i class="fas fa-industry"></i>
            </div>
            <div class="sidebar-title">转炉终点预测系统</div>
        </div>
        <div class="sidebar-menu">
            <div class="sidebar-menu-title">主导航</div>
            <ul>
                <li><a href="index.html"><i class="fas fa-home"></i>首页</a></li>
                
                <li><a href="production-monitor.html"><i class="fas fa-chart-line"></i>生产监控</a></li>
                <li><a href="history-data.html"><i class="fas fa-history"></i>历史数据</a></li>
                <li><a href="quality-analysis.html"><i class="fas fa-flask"></i>质量分析</a></li>
            </ul>
            
            <div class="sidebar-menu-title">模型管理</div>
            <ul>
                <li><a href="model-details.html"><i class="fas fa-brain"></i>模型详情</a></li>
                <li><a href="model-config.html"><i class="fas fa-cogs"></i>模型配置</a></li>
                <li><a href="model-performance.html"><i class="fas fa-chart-bar"></i>模型性能</a></li>
                <li><a href="model-update.html"><i class="fas fa-sync-alt"></i>模型更新</a></li>
            </ul>
            
            <div class="sidebar-menu-title">系统设置</div>
            <ul>
                <li><a href="system-settings.html"><i class="fas fa-cog"></i>系统设置</a></li>
                <li><a href="user-management.html"><i class="fas fa-user-cog"></i>用户管理</a></li>
                <li><a href="alert-settings.html" class="active"><i class="fas fa-bell"></i>预警设置</a></li>
                <li><a href="data-management.html"><i class="fas fa-database"></i>数据管理</a></li>
                <li><a href="online-analysis.html"><i class="fas fa-chart-bar"></i>在线分析</a></li>
            </ul>
        </div>
        <div class="sidebar-footer">
            <i class="fas fa-info-circle"></i>
            <span>系统版本：v2.5.3</span>
        </div>
    </div>

    <!-- 侧边栏遮罩层 -->
    <div class="sidebar-overlay"></div>

    <div class="container">
        <div class="header">
            <div class="header-left">
                <div>
                    <div class="title">预警设置</div>
                    <div class="subtitle">配置系统预警规则和通知方式</div>
                </div>
            </div>
            <div class="header-right">
                <div class="header-icon">
                    <i class="fas fa-search"></i>
                </div>
                <div class="header-icon">
                    <i class="fas fa-bell"></i>
                    <span class="notification-badge">3</span>
                </div>
                <div class="dropdown">
                    <div class="user-dropdown dropdown-trigger">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="用户头像" class="user-avatar">
                        <span class="user-name">管理员</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item">
                            <i class="fas fa-user"></i>
                            <span>个人资料</span>
                        </a>
                        <a href="#" class="dropdown-item">
                            <i class="fas fa-cog"></i>
                            <span>账号设置</span>
                        </a>
                        <a href="#" class="dropdown-item">
                            <i class="fas fa-question-circle"></i>
                            <span>帮助中心</span>
                        </a>
                        <a href="login.html" class="dropdown-item">
                            <i class="fas fa-sign-out-alt"></i>
                            <span>退出登录</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="content-wrapper">
            <!-- 预警规则卡片 -->
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        <i class="fas fa-exclamation-triangle"></i>
                        预警规则
                    </div>
                    <div class="card-actions">
                        <button class="btn btn-primary">
                            <i class="fas fa-plus"></i>
                            添加规则
                        </button>
                        <div class="dropdown">
                            <button class="btn btn-secondary dropdown-trigger">
                                <i class="fas fa-filter"></i>
                                筛选
                            </button>
                            <div class="dropdown-menu">
                                <a href="#" class="dropdown-item">所有规则</a>
                                <a href="#" class="dropdown-item">工艺参数</a>
                                <a href="#" class="dropdown-item">质量指标</a>
                                <a href="#" class="dropdown-item">设备状态</a>
                                <a href="#" class="dropdown-item">模型异常</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-content">
                    <div class="table-responsive">
                        <table>
                            <thead>
                                <tr>
                                    <th style="width: 50px;">#</th>
                                    <th>规则名称</th>
                                    <th>监控指标</th>
                                    <th>触发条件</th>
                                    <th>预警级别</th>
                                    <th>状态</th>
                                    <th>最近触发</th>
                                    <th style="width: 150px;">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>终点温度超限</td>
                                    <td>终点温度</td>
                                    <td>> 1680℃</td>
                                    <td><span class="alert-level high">高</span></td>
                                    <td><span class="status-badge active">启用</span></td>
                                    <td>2023-11-28 07:45</td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="action-btn" title="编辑">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="action-btn" title="查看记录">
                                                <i class="fas fa-history"></i>
                                            </button>
                                            <button class="action-btn" title="禁用">
                                                <i class="fas fa-ban"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>碳含量偏低</td>
                                    <td>终点碳含量</td>
                                    <td>< 0.03%</td>
                                    <td><span class="alert-level medium">中</span></td>
                                    <td><span class="status-badge active">启用</span></td>
                                    <td>2023-11-27 14:32</td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="action-btn" title="编辑">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="action-btn" title="查看记录">
                                                <i class="fas fa-history"></i>
                                            </button>
                                            <button class="action-btn" title="禁用">
                                                <i class="fas fa-ban"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>氧气流量异常</td>
                                    <td>氧气流量</td>
                                    <td>< 800 Nm³/min</td>
                                    <td><span class="alert-level medium">中</span></td>
                                    <td><span class="status-badge active">启用</span></td>
                                    <td>2023-11-28 02:15</td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="action-btn" title="编辑">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="action-btn" title="查看记录">
                                                <i class="fas fa-history"></i>
                                            </button>
                                            <button class="action-btn" title="禁用">
                                                <i class="fas fa-ban"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>预测偏差过大</td>
                                    <td>模型预测偏差</td>
                                    <td>> 15℃</td>
                                    <td><span class="alert-level high">高</span></td>
                                    <td><span class="status-badge active">启用</span></td>
                                    <td>2023-11-26 18:40</td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="action-btn" title="编辑">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="action-btn" title="查看记录">
                                                <i class="fas fa-history"></i>
                                            </button>
                                            <button class="action-btn" title="禁用">
                                                <i class="fas fa-ban"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>5</td>
                                    <td>渣铁比异常</td>
                                    <td>渣铁比</td>
                                    <td>> 0.15</td>
                                    <td><span class="alert-level low">低</span></td>
                                    <td><span class="status-badge inactive">禁用</span></td>
                                    <td>2023-11-25 09:20</td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="action-btn" title="编辑">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="action-btn" title="查看记录">
                                                <i class="fas fa-history"></i>
                                            </button>
                                            <button class="action-btn" title="启用">
                                                <i class="fas fa-check"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="pagination">
                        <button class="btn btn-icon pagination-btn" disabled>
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <button class="btn pagination-btn active">1</button>
                        <button class="btn pagination-btn">2</button>
                        <button class="btn pagination-btn">3</button>
                        <button class="btn btn-icon pagination-btn">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 通知配置卡片 -->
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        <i class="fas fa-bullhorn"></i>
                        通知配置
                    </div>
                    <button class="btn btn-primary">
                        <i class="fas fa-save"></i>
                        保存配置
                    </button>
                </div>
                <div class="card-content">
                    <div class="form-section">
                        <div class="form-section-title">通知方式</div>
                        <div class="form-group">
                            <div class="checkbox-group">
                                <label class="checkbox-label">
                                    <input type="checkbox" checked>
                                    <span class="checkbox-custom"></span>
                                    系统内部消息
                                </label>
                                <label class="checkbox-label">
                                    <input type="checkbox" checked>
                                    <span class="checkbox-custom"></span>
                                    短信通知
                                </label>
                                <label class="checkbox-label">
                                    <input type="checkbox" checked>
                                    <span class="checkbox-custom"></span>
                                    邮件通知
                                </label>
                                <label class="checkbox-label">
                                    <input type="checkbox">
                                    <span class="checkbox-custom"></span>
                                    微信通知
                                </label>
                                <label class="checkbox-label">
                                    <input type="checkbox">
                                    <span class="checkbox-custom"></span>
                                    电话告警
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-section">
                        <div class="form-section-title">通知频率</div>
                        <div class="form-group">
                            <label for="notification-frequency">预警重复通知间隔</label>
                            <select id="notification-frequency" class="form-control">
                                <option value="immediate">立即通知（无间隔）</option>
                                <option value="5min" selected>5分钟</option>
                                <option value="15min">15分钟</option>
                                <option value="30min">30分钟</option>
                                <option value="1hour">1小时</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="notification-limit">每日通知上限</label>
                            <select id="notification-limit" class="form-control">
                                <option value="no-limit">无限制</option>
                                <option value="5">5条/天</option>
                                <option value="10" selected>10条/天</option>
                                <option value="20">20条/天</option>
                                <option value="50">50条/天</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-section">
                        <div class="form-section-title">通知接收人</div>
                        <div class="form-group">
                            <label>接收人设置</label>
                            <div class="tag-input-container">
                                <div class="tag">
                                    张工程师 <span class="tag-remove">&times;</span>
                                </div>
                                <div class="tag">
                                    李经理 <span class="tag-remove">&times;</span>
                                </div>
                                <div class="tag">
                                    王操作员 <span class="tag-remove">&times;</span>
                                </div>
                                <input type="text" class="tag-input" placeholder="输入姓名添加接收人...">
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label>按预警级别接收</label>
                            <div class="alert-level-settings">
                                <div class="alert-level-item">
                                    <span class="alert-level high">高</span>
                                    <select class="form-control">
                                        <option value="all" selected>所有人接收</option>
                                        <option value="managers">经理及以上</option>
                                        <option value="engineers">工程师及以上</option>
                                        <option value="custom">自定义</option>
                                    </select>
                                </div>
                                <div class="alert-level-item">
                                    <span class="alert-level medium">中</span>
                                    <select class="form-control">
                                        <option value="all">所有人接收</option>
                                        <option value="managers">经理及以上</option>
                                        <option value="engineers" selected>工程师及以上</option>
                                        <option value="custom">自定义</option>
                                    </select>
                                </div>
                                <div class="alert-level-item">
                                    <span class="alert-level low">低</span>
                                    <select class="form-control">
                                        <option value="all">所有人接收</option>
                                        <option value="managers">经理及以上</option>
                                        <option value="engineers">工程师及以上</option>
                                        <option value="custom" selected>自定义</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-section">
                        <div class="form-section-title">预警静默期</div>
                        <div class="form-group">
                            <label for="quiet-time-start">开始时间</label>
                            <input type="time" id="quiet-time-start" class="form-control" value="22:00">
                        </div>
                        <div class="form-group">
                            <label for="quiet-time-end">结束时间</label>
                            <input type="time" id="quiet-time-end" class="form-control" value="06:00">
                        </div>
                        <div class="form-group">
                            <label>静默期设置</label>
                            <div class="checkbox-group">
                                <label class="checkbox-label">
                                    <input type="checkbox" checked>
                                    <span class="checkbox-custom"></span>
                                    静默期仅对低级别预警生效
                                </label>
                                <label class="checkbox-label">
                                    <input type="checkbox">
                                    <span class="checkbox-custom"></span>
                                    静默期对所有预警生效
                                </label>
                                <label class="checkbox-label">
                                    <input type="checkbox" checked>
                                    <span class="checkbox-custom"></span>
                                    高级别预警永不静默
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="scripts/unified.js"></script>
    <script src="scripts/modal-dialog.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化下拉菜单
            initDropdowns();
            
            // 初始化状态徽章颜色
            const statusBadges = document.querySelectorAll('.status-badge');
            statusBadges.forEach(badge => {
                if (badge.classList.contains('active')) {
                    badge.style.backgroundColor = 'rgba(76, 175, 80, 0.1)';
                    badge.style.color = '#4caf50';
                } else if (badge.classList.contains('inactive')) {
                    badge.style.backgroundColor = 'rgba(158, 158, 158, 0.1)';
                    badge.style.color = '#9e9e9e';
                }
            });
            
            // 初始化预警级别颜色
            const alertLevels = document.querySelectorAll('.alert-level');
            alertLevels.forEach(level => {
                if (level.classList.contains('high')) {
                    level.style.backgroundColor = 'rgba(244, 67, 54, 0.1)';
                    level.style.color = '#f44336';
                } else if (level.classList.contains('medium')) {
                    level.style.backgroundColor = 'rgba(255, 152, 0, 0.1)';
                    level.style.color = '#ff9800';
                } else if (level.classList.contains('low')) {
                    level.style.backgroundColor = 'rgba(33, 150, 243, 0.1)';
                    level.style.color = '#2196f3';
                }
            });
            
            // 为操作按钮添加悬停效果
            const actionBtns = document.querySelectorAll('.action-btn');
            actionBtns.forEach(btn => {
                if (!btn.disabled) {
                    btn.addEventListener('mouseenter', () => {
                        btn.style.backgroundColor = 'rgba(0, 0, 0, 0.05)';
                    });
                    
                    btn.addEventListener('mouseleave', () => {
                        btn.style.backgroundColor = '';
                    });
                }
            });
            
            // 初始化标签移除功能
            const tagRemoveBtns = document.querySelectorAll('.tag-remove');
            tagRemoveBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    btn.parentElement.remove();
                });
            });
            
            // 初始化标签输入
            const tagInput = document.querySelector('.tag-input');
            const tagContainer = document.querySelector('.tag-input-container');
            
            tagInput.addEventListener('keydown', (e) => {
                if (e.key === 'Enter' && tagInput.value.trim() !== '') {
                    const newTag = document.createElement('div');
                    newTag.className = 'tag';
                    newTag.innerHTML = `${tagInput.value.trim()} <span class="tag-remove">&times;</span>`;
                    
                    // 为新标签的移除按钮添加事件
                    newTag.querySelector('.tag-remove').addEventListener('click', () => {
                        newTag.remove();
                    });
                    
                    // 在输入框前插入新标签
                    tagContainer.insertBefore(newTag, tagInput);
                    tagInput.value = '';
                    
                    e.preventDefault();
                }
            });
        });
        
        // 初始化下拉菜单
        function initDropdowns() {
            const dropdownTriggers = document.querySelectorAll('.dropdown-trigger');
            
            dropdownTriggers.forEach(trigger => {
                trigger.addEventListener('click', (e) => {
                    e.stopPropagation();
                    
                    const dropdown = trigger.closest('.dropdown');
                    const menu = dropdown.querySelector('.dropdown-menu');
                    
                    // 关闭其他下拉菜单
                    document.querySelectorAll('.dropdown-menu').forEach(item => {
                        if (item !== menu) {
                            item.classList.remove('show');
                        }
                    });
                    
                    // 切换当前下拉菜单
                    menu.classList.toggle('show');
                });
            });
            
            // 点击页面其他位置关闭下拉菜单
            document.addEventListener('click', () => {
                document.querySelectorAll('.dropdown-menu').forEach(menu => {
                    menu.classList.remove('show');
                });
            });
        }
    </script>
</body>
</html> 